<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <meta charset="utf-8">
    <title>game</title>
    <style type="text/css">
        body{
            background-color: black;
        }
        .img{
            width: 500px;
            height: 500px;
            position: absolute;
        }
    </style>
</head>
<body>

    <img src="pet.gif" class="img" style="top: 0px; left:0px;"/>
    <script src="jquery.js"></script>
    <script>
        function Change(){
            $("img").dblclick(function(){//双击变身,dblclick双击
                $("img").attr("src","player3.gif");//一个参数获取，两个参数设置
                
                $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","pet.gif");

                    $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player2.gif");
                        
                    $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player1.gif");
                    })
                    
                    })
                })

            })
        }
        function Change1(){
            $("img").dblclick(function(){//双击变身,dblclick双击
                $("img").attr("src","player3.gif");//一个参数获取，两个参数设置
                
                $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","pet.gif");

                    $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player2.gif");
                        
                    $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player1.gif");
                    })
                    
                    })
                })

            })
        }
        
        //switch实现
        function move(){
         
            $(window).keydown(function(e){//键盘按下的事件，用e来接收
                let top = parseInt($("img").css("top"));//将字符串解析成整数
                let left = parseInt($("img").css("left"));
                switch(e.keyCode){//用于获取代表键盘上的键的数字
                    case 87:  
                    top==0?top:top = top - 50;
                    $("img").css("top",top); $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player1.gif");
                    $("img").dblclick(function(){//双击变身,dblclick双击
                $("img").attr("src","player2.gif");//一个参数获取，两个参数设置
                    })
                })
                    break;
                    case 83:
                    top>=window.innerHeight-441?top:top = top + 50;
                    $("img").css("top",top); $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player1.gif");
                    $("img").dblclick(function(){//双击变身,dblclick双击
                $("img").attr("src","player2.gif");//一个参数获取，两个参数设置
                    })
                    })
                    break;
                    case 65:
                    $("img").attr("src","playerbig_left.gif");
                    left==0?left:left =left - 50;
                    $("img").css("left",left);
                     $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player1.gif");
                    $("img").dblclick(function(){//双击变身,dblclick双击
                $("img").attr("src","player2.gif");//一个参数获取，两个参数设置
                    })
                    })
                    break;
                    case 68:
                    console.log(left); 
                    console.log(window.innerWidth);
                    $("img").attr("src","playerbig_right.gif");
                    left>=window.innerWidth-492?left:left =left+ 50;
                    $("img").css("left",left ); 
                    $("img").dblclick(function(){//再双击还原
                    $("img").attr("src","player1.gif");
                    $("img").dblclick(function(){//双击变身,dblclick双击
                $("img").attr("src","player2.gif");//一个参数获取，两个参数设置
                    })
                    })
                    break;
                    default:
                    break;	
                }
            })
        }
        
        //if实现
        function move2(){
            $(window).keydown(function(e){
                let top = parseInt($("img").css("top"));
                let left = parseInt($("img").css("left"));
                 if(e.keyCode == 87) {
                     $("img").css("top",top - 50);
                 }else if(e.keyCode == 83){
                     $("img").css("top",top + 50);
                 }else if(e.keyCode == 65){
                     $("img").attr("src","player_left.gif");
                     $("img").css("left",left - 50);
                 }else if(e.keyCode == 68){
                     $("img").attr("src","player_right.gif");
                     $("img").css("left",left + 50);
                 }
            })
        }
        
        $(function(){
            Change1();
            move();
            Change();
        })

    </script>
</body>
</html>
